export const baseUsage = `
import {PhForm,PhFormSelect,PhOption} from 'phooen'

interface FormSelect{
    disabled:{type:Boolean,default:false},
    multiple:{type:Boolean,default:false},//开启多选
    // value:{type:[String,Number,Array]}, 废除
    // v-model=xxx代替
    align:{type:String,default:'left'} //<center|left->default>
    
}
interface Option{
    value:{type:[String,Number]}
}
//单独使用
import {PhSelect,PhOption} from 'phoeon'
interface Select {
    ...同上
    不支持验证器
}

//测试数据
{
    pro:1,
    pro1:[1],
    pros:[{
        value:1,
        text:"老师",
    },{
        value:2,
        text:"学生",
    }]
}
`;
export const script = `
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import {PhSelect,PhOption,PhDivider} from 'phoeon'

export default defineComponent({
    components:{
        PhSelect,PhOption,PhDivider
    },
    setup() {
        const formData = reactive({
            pro:1,
            pro1:[1],
            pros:[{
                value:1,
                text:"老师",
            },{
                value:2,
                text:"学生",
            }]
        })

        const onProChange = (v:any)=>{
            formData.pro = v
        }
        const onPro1Change = (v:any)=>{
            formData.pro1 = v
        }
        return {
            ...toRefs(formData),
            onProChange,
            onPro1Change,
            ...Data
        }
    },
})
</script>
`;
export const demo1 = `<ph-select style="width:200px" :value="pro" @change="onProChange">
    <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{opt.text}}</ph-option>
</ph-select>`;

export const demo2 = `<ph-select style="width:200px" :value="pro1" @change="onPro1Change" :multiple="true">
    <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{opt.text}}</ph-option>
</ph-select>`;

export const demo3 = `<ph-select style="width:200px" :value="pro" @change="onProChange" :disabled="true">
    <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{opt.text}}</ph-option>
</ph-select>`;

export const demo4 = `<ph-select style="width:200px" :value="pro" @change="onProChange" align="center">
    <ph-option :value="opt.value" v-for="opt in pros" :key="opt.value">{{opt.text}}</ph-option>
</ph-select>`;
